﻿@page "/docs/extensions/datagrid/features/sorting"

<Seo Canonical="/docs/extensions/datagrid/features/sorting" Title="Blazorise DataGrid Sorting" Description="Learn Blazorise by the example. Blazorise DataGrid offers efficient data sorting with customizable options." />

<DocsPageTitle Path="Extensions/DataGrid/Features/Sorting">
    Blazorise DataGrid: Sorting
</DocsPageTitle>

<DocsPageLead>
    Sorting allows you to arrange data in ascending or descending order. To sort a column, click its header.
</DocsPageLead>

<DocsPageSubtitle>
    Overview
</DocsPageSubtitle>

<DocsPageParagraph>
    All columns can be sorted automatically if the option <Code>Sortable</Code> is enabled on the column.
</DocsPageParagraph>

<DocsPageParagraph>
    Use <Code>SortField</Code> if you would like to set a different field or property to be considered by the sorting mechanism on a certain column.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Single">
        By default the DataGrid sorting mode is single column based.
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridSortSingleExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridSortSingleExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Multiple">
        You may also change the DataGrid sorting mode to multiple, to allow sorting on multiple columns.
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridSortMultipleExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridSortMultipleExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="SortField">
        <Paragraph>
            The <code>SortField</code> feature, allows you to define a different Property or Field of the Item to be considered by the sorting mechanism.
        </Paragraph>
        <Paragraph>
            In this example, we define the Sort Field of the <code>Childrens</code> Column to be the calculated property <code>ChildrensPerSalary</code>.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridSortFieldExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridSortFieldExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="SortComparer">
        <Paragraph>
            The <code>SortComparer</code> feature allows you to define a custom sorting logic for a column by specifying an <code>IComparer&lt;TItem&gt;</code> implementation.
            This is useful when you want to sort data based on complex or calculated criteria that go beyond the default alphabetical or numerical order.
            Note that this comparer can only be used with in-memory data.
        </Paragraph>
        <Paragraph>
            In this example, a custom comparer is applied to sort by the <code>FirstName</code> length, and then, for items with the same first name length, alphabetically by <code>LastName</code>.
            Sort by <code>Full Name</code> column to see it in action.
            This demonstrates how to implement a multi-criteria sorting mechanism in Blazorise's DataGrid.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridSortComparerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridSortComparerExample" />
</DocsPageSection>


<DocsPageSection>
    <DocsPageSectionHeader Title="ApplySorting">
        <Paragraph>
            You can use the <code>ApplySorting</code> method to programmatically specify the columns to sort by.
        </Paragraph>
        <Paragraph>
            In this example, there are two buttons to change the sort order programmatically.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridApplySortingExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridApplySortingExample" />
</DocsPageSection>

<DocsPageApi>
    <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
</DocsPageApi>